
* {
padding: 0;
margin: 0;
}

ul,
ul li,
li {
list-style: none;
margin: 0;
}

html {
font-size: 62.5%;
}

body {
font-size: 1.4rem;
padding-bottom: 60px;
color: #4C5269;
background: #F7F7F7;
}

a,
a:hover,
a:focus,
a:active {
text-decoration: none;
color: #434343;

}
.ulnav{display: flex;justify-content: space-around;}
.ulnav li{line-height: 40px;margin-bottom: 5px;}
.ulnav li.selected{border-bottom: 2px solid #675BFF;color: #545c70;}
.bg{position: absolute;top: 0;z-index: -1;}
.product_top{width:90%;padding: 10px 15px;border-radius: 10px;background: #fff;margin: 30px 5% 0 5%; box-shadow: 0 5px 10px #F0F0F0;}
.product_top .media-left img{width: 50px;height: 50px;border-radius: 10px;}
.product_top .media-body .media-heading{font-size: 1.5rem;margin-top: 15px;}
.product_top .media-body p{font-size: 1.3rem;}
.product_top .media-body p b{font-size: 1.8rem;color: #558dff;font-weight: normal;}
.product_top .list-group{display: flex;justify-content: space-around;border-top:1px solid #eee;}
.product_top .list-group .list-group-item{border: 0;text-align: center;display: flex;flex-direction: column;padding: 0;margin-top: 10px;}
.product_top .list-group .list-group-item b{font-size:1.8rem;color: #fb9300;}
.product_top .list-group .list-group-item text{font-size: 1.1rem;color: #868a97;}
.data{background: #fff;display: flex;border-radius: 10px;margin-top: 10px;box-shadow: 0 5px 10px #F0F0F0;}
.data li{display: flex;flex-direction: column;border: 0;width:49%;text-align: center}
.data li span{color: #868a97;line-height: 30px; margin-top: 10px;}
.data li text{font-size: 1.5rem;}
.data b{height: 35px;width:2%; background: #eee;display: inline-block;border-radius: 10px;margin: 18px 0;}
.range{width: 90%; display: flex;flex-direction: column;margin: 0 5%;margin-bottom: 15px;}
.alculation,.procedure,.like,.bonus,.commission,.heroList{background: #fff;border-radius: 10px;padding: 15px;box-shadow: 0 5px 10px #F0F0F0;margin-top: 10px;overflow: hidden;}
 h3.title{font-size: 1.5rem; padding-left:20px;margin:10px 0 20px 0; background: url(ic.png) 0 center no-repeat;background-size: 12px 12px;}
.alculation li{display: flex;justify-content: space-between;}
.alculation li span{font-size: 1.2rem;color: #939bb7;line-height: 16px;}
.interest_rate li{width:100%;text-align: center; border: 0;display: inline-block;padding: 2px;}
.interest_rate li:nth-child(1),.interest_rate li:nth-child(4){font-size: 1.1rem;color: #939bb7;}
.interest_rate li:nth-child(3){font-size: 1.8rem;color: #fb9300;font-weight: bold;}
.apply{padding: 15px 5%;background: #fff;margin-top: 10px;box-shadow: 0 5px 10px #F0F0F0;border-radius: 10px;}
.apply dd{line-height: 30px;color: #939bb7;}
.procedure img{width:26px;height:19px;margin: 15px 5px; }
.procedure li img{width:49px;height: 50px;margin: 0 auto;}
.procedure li.col-xs-2{display: flex;flex-direction: column;text-align: center;}
.procedure li text{font-size: 1.2rem;line-height: 30px;color: #A6BCE8;}
.like .thumbnail{border: 0;text-align: center;margin: 0;}
.like .thumbnail img{width:64px;border-radius: 10px;}
.like .thumbnail p{line-height: 30px;color: #B2B4BC;font-size: 1.4rem;}
.bonus p{font-size: 1.4rem;color: #939bb7;line-height: 26px;}
.commission .thumbnail{border: 0;text-align: center;margin: 0;}
.commission .thumbnail li{height: 39px;background: #FDD340;width: 75px;margin: 0 auto;line-height: 39px;margin-top:11px; font-size: 1.5rem;color: #fff;}
.commission .thumbnail dd{height: 52px;background: #FF9240;width: 75px;margin: 0 auto;line-height: 52px;font-size: 1.5rem;color: #fff;}
.commission .thumbnail p{line-height: 30px;font-size: 1.5rem;}
.heroList{display: inline-block;}
.heroList .list-group li { border: 0; margin: 0;padding: 0;display: flex;justify-content: space-around;}
.heroList .list-group li p:nth-child(1) {width:10%;line-height: 50px;}
.heroList .list-group li p:nth-child(2){width:15%;}
.heroList .list-group li img{width:35px;height: 35px;  margin-top: 6px;}
/* .heroList .list-group li  img:nth-child(1) { width: 27px; height: 33px;margin-top: 10px;}
.heroList .list-group li  img:nth-child(2) { width: 50px;height: 50px;border-radius: 100%;margin: 0 10px;} */
.heroList .list-group li p { width:25%; line-height: 50px; display: flex;flex-direction: column;margin: 0;color: #939BB7;}
.heroList ol{display: flex;justify-content: space-around;border-bottom: 1px solid #e5e5e5;}
.heroList ol li{width: 25%;color: #939BB7;line-height: 50px;}
.heroList ol li:nth-child(1){width:10%;}
.heroList ol li:nth-child(2){width:15%;}
.buttom-but{height: 50px;line-height: 50px;font-size: 1.5rem;position:fixed;bottom: 0;}
.buttom-but a:nth-child(1){text-align: center;color: #fff;background:url(shenqing.png) 35px center no-repeat, #FFCA4A;background-size: 23px 23px;}
.buttom-but a:nth-child(2){text-align: center;color: #fff;background:url(fenxiang.png) 35px center no-repeat, #64A0FF;background-size: 23px 23px;}


@media (max-width:360px){
    .product_top .media-body p{font-size: 1.2rem;}
    .procedure img{width:20px;}
    .procedure li.col-xs-2{width:17%;}
    .procedure li text{font-size: 0.8rem;}
    
}


input[type=range] {
    margin-top: 8px;
    outline: none;
    -webkit-appearance: none;
    /*清除系统默认样式*/
    width: 100% !important;
    /*background: -webkit-linear-gradient(#705BFF, #705BFF) no-repeat, #f7f7f7;*/
    background:url(jindu.png) center center no-repeat, #F5F3FF;
    background-size: 100% 100%;
    /*设置左右宽度比例*/
    height: 10px;
    /*横条的高度*/
    border-radius: 5px;
    margin-bottom: 10px;
    /* box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; */
}

/*拖动块的样式*/

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    /*清除系统默认样式*/
    height: 20px;
    /*拖动块高度*/
    width: 20px;
    /*拖动块宽度*/
    background: #705BFF;
    /*拖动块背景*/
    border-radius: 50%;
    /*外观设置为圆形*/
  /*  border: solid 1px #ddd;*/
    /*设置边框*/
}